import React, {Component} from 'react';
import {
	AppRegistry,
	Dimensions,
	Platform,
	NativeModules,
	DeviceInfo,
	StyleSheet,
	Image,
	Text,
	View,
	TextInput,
	PixelRatio,
	TouchableOpacity,
	ScrollView
} from 'react-native';
import HTMLView from 'react-native-htmlview';

var Common = require('./common');
import moment from 'moment';

const pixelRatio = PixelRatio.get();
const dismissKeyboard = require('dismissKeyboard');
// iPhoneX
const X_WIDTH = 375;
const X_HEIGHT = 812;

// screen
const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
export default class Brand extends Component<Props> {
	static navigationOptions = {
		headerTitle: '详情',
		tabBarLabel: '详情',
	};

	constructor(props) {
		super(props);
		this.state = {
			id: this.props.navigation.state.params,
			showLeft: false,//显示参数
			showRight: false,//显示装饰
			data: {info: {}},
			detail_info: {},
			leftcontent: ''
		};
	}

	isIphoneX() {
		return (
			Platform.OS === 'ios' &&
			((SCREEN_HEIGHT === X_HEIGHT && SCREEN_WIDTH === X_WIDTH) ||
				(SCREEN_HEIGHT === X_WIDTH && SCREEN_WIDTH === X_HEIGHT))
		)
	}

	ifIphoneX() {
		var flag = this.isIphoneX();
		if (flag) {
			console.log('true')
			this.setState({
				iphonex: true
			})
		} else {
			console.log('false')
			this.setState({
				iphonex: false
			})
		}
	}

	login() {
		var _this = this;
		Common.ajaxPost(Common.url + 'login.php', function (res) {
			if (res.code == "0000") {

			}
		}.bind(this), {verify: '08login', t: ''});
	}

	toRegister() {
		this.props.navigation.navigate('Register')
	}

	showLeft(leftcontent) {
		this.setState({
			showLeft: !this.state.showLeft,
			leftcontent: leftcontent
		}, () => {
			if (this.state.showLeft) {
				this.setState({
					showRight: false
				})
			}
		})

	}

	showRight() {
		this.setState({
			showRight: !this.state.showRight
		}, () => {
			if (this.state.showRight) {
				this.setState({
					showLeft: false
				})
			}
		})

	}

	getData(id) {
		var _this = this;
		Common.ajaxPost(Common.url + 'car.php?action=detail&id=' + id, function (res) {
			console.log(id)

			if (res.code == 1) {

				var data = res.data;
				data.updatedate = moment(parseFloat(data.updatedate + '000')).format('YYYY-MM-DD HH:mm:ss');
				_this.setState({
					data: data,
					detail_info: data.detail_info
				})
				console.log(data)
			}
		}.bind(this), {verify: '08login', t: ''});
	}

	componentDidMount() {
		this.getData(this.state.id)
		this.ifIphoneX();
		// console.log(this.props.navigation.state.params)
		// if(this.props.navigation.state.params.from){
		//   this.setState({
		//     from:this.props.navigation.state.params,
		//   })
		// }
	}

	render() {
		const {navigate} = this.props.navigation;
		return (
			<View style={styles.container}>
				<View style={styles.top}>
					<View style={{paddingBottom: 15}}>
						<Text style={styles.topTitle}>{this.state.data.subject}</Text>
					</View>
					<Text style={{fontSize: 14, color: 'rgb(173,173,173)'}}>{this.state.data.updatedate}</Text>
				</View>
				<View style={{height: 8, backgroundColor: '#f5f5f5'}}></View>
				<View style={styles.picbox}>
					{
						this.state.detail_info['tuji'] ?
							(this.state.detail_info.tuji.map(function (item) {
								return (
									<Image key={item.remote} style={[styles.pic, {marginRight: 5}]}
									       source={{uri: Common.url + item.remote}}/>
								);
							})) :
							(null)
					}
				</View>
				<View style={{height: 8, backgroundColor: '#f5f5f5'}}></View>
				<ScrollView>
					<View style={styles.row}>
						<Image style={{width: 18, height: 12,}} source={require('./images/biaopei.png')}/>
						<Text style={{fontSize: 16, color: 'rgb(49,49,49)', marginLeft: 5}}>标配</Text>
					</View>
					<View style={styles.content}>
						<HTMLView style={styles.newsContent} value={this.state.detail_info.biaopei}/>
					</View>
					<View style={{height: 8, backgroundColor: '#f5f5f5'}}></View>
					<View style={styles.row}>
						<Image style={{width: 17, height: 17,}} source={require('./images/xuanpei.png')}/>
						<Text style={{fontSize: 16, color: 'rgb(49,49,49)', marginLeft: 5}}>选配</Text>
					</View>
					<View style={styles.content}>
						<HTMLView style={styles.newsContent} value={this.state.detail_info.xuanpei}/>
					</View>
				</ScrollView>
				<View style={styles.taocan}>
					{
						(this.state.detail_info['taocan1title'] && this.state.detail_info['taocan1content']) ?
							(
								<TouchableOpacity onPress={() => this.showLeft(this.state.detail_info['taocan1content'])}>
									<View style={{marginBottom: 20}}>
										<Image style={{width: 44, height: 44,}} source={require('./images/taocan.png')}/>
										<Text style={styles.taocantxt}>{this.state.detail_info['taocan1title']}</Text>
									</View>
								</TouchableOpacity>
							) :
							null
					}
					{
						(this.state.detail_info['taocan2title'] && this.state.detail_info['taocan2content']) ?
							(
								<TouchableOpacity onPress={() => this.showLeft(this.state.detail_info['taocan2content'])}>
									<View style={{marginBottom: 20}}>
										<Image style={{width: 44, height: 44,}} source={require('./images/taocan.png')}/>
										<Text style={styles.taocantxt}>{this.state.detail_info['taocan2title']}</Text>
									</View>
								</TouchableOpacity>
									) :
							null
					}
					{
						(this.state.detail_info['taocan3title'] && this.state.detail_info['taocan3content']) ?
							(
								<TouchableOpacity onPress={() => this.showLeft(this.state.detail_info['taocan3content'])}>
									<View style={{marginBottom: 20}}>
										<Image style={{width: 44, height: 44,}} source={require('./images/taocan.png')}/>
										<Text style={styles.taocantxt}>{this.state.detail_info['taocan3title']}</Text>
									</View>
								</TouchableOpacity>
							) :
							null
					}
					{
						(this.state.detail_info['taocan4title'] && this.state.detail_info['taocan4content']) ?
							(
								<TouchableOpacity onPress={() => this.showLeft(this.state.detail_info['taocan4content'])}>
									<View style={{marginBottom: 20}}>
										<Image style={{width: 44, height: 44,}} source={require('./images/taocan.png')}/>
										<Text style={styles.taocantxt}>{this.state.detail_info['taocan4title']}</Text>
									</View>
								</TouchableOpacity>
							) :
							null
					}
					{
						(this.state.detail_info['taocan5title'] && this.state.detail_info['taocan5content']) ?
							(
								<TouchableOpacity onPress={() => this.showLeft(this.state.detail_info['taocan5content'])}>
									<View style={{marginBottom: 20}}>
										<Image style={{width: 44, height: 44,}} source={require('./images/taocan.png')}/>
										<Text style={styles.taocantxt}>{this.state.detail_info['taocan5title']}</Text>
									</View>
								</TouchableOpacity>
							) :
							null
					}
				</View>
				<View style={[styles.bottom, {bottom: this.state.iphonex ? 20 : 0}]}>
					<TouchableOpacity onPress={() => this.showLeft(this.state.detail_info.biaopei)}
					                  style={[styles.bottomItem, {backgroundColor: this.state.showLeft ? 'rgb(111,155,255)' : '#fff'}]}>
						{this.state.showLeft ? (
							<Image style={{width: 14, height: 14,}} source={require('./images/canshu-bai.png')}/>
						) : (
							<Image style={{width: 14, height: 14,}} source={require('./images/canshu-lan.png')}/>
						)}
						<Text style={{
							paddingLeft: 5,
							paddingRight: 5,
							color: this.state.showLeft ? '#fff' : '#666'
						}}>参数</Text>
						{this.state.showLeft ? (
							<Image style={{width: 14, height: 8,}} source={require('./images/xiangshang1.png')}/>
						) : (
							<Image style={{width: 14, height: 8,}} source={require('./images/xiangshang.png')}/>
						)}
					</TouchableOpacity>
					<TouchableOpacity onPress={this.showRight.bind(this)} style={[styles.bottomItem, {
						borderRightWidth: 0,
						backgroundColor: this.state.showRight ? 'rgb(111,155,255)' : '#fff'
					}]}>
						{this.state.showRight ? (
							<Image style={{width: 14, height: 14,}} source={require('./images/canshu-bai.png')}/>
						) : (
							<Image style={{width: 14, height: 14,}} source={require('./images/canshu-lan.png')}/>
						)}
						<Text style={{
							paddingLeft: 5,
							paddingRight: 5,
							color: this.state.showRight ? '#fff' : '#666'
						}}>装饰</Text>
						{this.state.showRight ? (
							<Image style={{width: 14, height: 8,}} source={require('./images/xiangshang1.png')}/>
						) : (
							<Image style={{width: 14, height: 8,}} source={require('./images/xiangshang.png')}/>
						)}
					</TouchableOpacity>
				</View>
				{this.state.showLeft ? (
					<ScrollView style={[styles.left, {
						bottom: this.state.iphonex ? 71 : 51,
						height: this.state.iphonex ? Common.screenHeight - 71 : Common.screenHeight - 51
					}]}>
						<View
							style={[styles.ceng, {height: this.state.iphonex ? Common.screenHeight - 321 : Common.screenHeight - 301}]}></View>
						<View style={{height: 250, backgroundColor: '#fff'}}>
							<HTMLView style={styles.newsContent} value={this.state.leftcontent}/>
						</View>
					</ScrollView>
				) : (null)}
				{this.state.showRight ? (
					<ScrollView style={[styles.left, {
						bottom: this.state.iphonex ? 71 : 51,
						height: this.state.iphonex ? Common.screenHeight - 71 : Common.screenHeight - 51
					}]}>
						<View
							style={[styles.ceng, {height: this.state.iphonex ? Common.screenHeight - 321 : Common.screenHeight - 301}]}></View>
						<View style={{height: 250, backgroundColor: '#fff'}}>
							<HTMLView style={styles.newsContent} value={this.state.detail_info.xuanpei}/>
						</View>
					</ScrollView>
				) : (null)}
			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		height: Common.screenHeight,
		backgroundColor: '#fff',
		position: 'relative',
	},
	top: {
		paddingTop: 10,
		paddingBottom: 10,
		paddingLeft: 20,
		paddingRight: 20,
	},
	topTitle: {
		fontSize: 18,
		color: 'rgb(80,140,238)'
	},
	picbox: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-around',
		paddingTop: 10,
		paddingBottom: 10,
		paddingLeft: 10,
		paddingRight: 10,

	},
	pic: {
		flex: 1,
		height: 120,
	},
	row: {
		flexDirection: 'row',
		alignItems: 'center',
		marginLeft: 10,
		marginRight: 10,
		paddingLeft: 10,
		paddingRight: 10,
		paddingTop: 10,
		paddingBottom: 10,
		borderBottomColor: '#e9e9e9',
		borderBottomWidth: 1,
	},
	content: {
		paddingLeft: 20,
		paddingRight: 20,
		paddingTop: 10,
		paddingBottom: 10,
	},
	bottom: {
		position: 'absolute',
		left: 0,
		bottom: 0,
		zIndex: 99999,
		width: Common.screenWidth,
		height: 50,
		borderTopColor: '#e9e9e9',
		borderTopWidth: 1,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
	},
	bottomItem: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		height: 50,
		flex: 1,
		borderRightColor: '#e9e9e9',
		borderRightWidth: 1,
	},
	left: {
		position: 'absolute',
		left: 0,
		width: Common.screenWidth,
	},
	ceng: {
		backgroundColor: 'rgba(0,0,0,0.7)'
	},
	leftTitle: {
		backgroundColor: '#f5f5f5',
		paddingLeft: 30,
		fontSize: 15,
		color: '#333',
		lineHeight: 32,
	},
	leftTxt: {
		backgroundColor: '#fff',
		paddingLeft: 30,
		borderBottomColor: '#e9e9e9',
		borderBottomWidth: 1,
		lineHeight: 32,
		fontSize: 14,
		color: '#666'
	},
	taocan: {
		width: 44,
		position: 'absolute',
		right: 10,
		top: 150,
		flexDirection: 'column',
		justifyContent: 'center',
		textAlign: 'center'
	},
	taocantxt: {
		fontSize: 12,
		color: '#fff',
		marginTop: -28,
	},
	newsContent: {
		paddingLeft: 20,
		paddingRight: 20,
	},
});
